<template>
  <div class="main-box">
    <div v-if="this.$store.state.user.userIsPhone">
      <PageFoot :activeProps="active" />
    </div>
    <div v-else class="page-head">
      <PageHeader :parActiveName="activeName" />
    </div>
    <div class="form-box">
      <div class="info-form-box">
        <div class="pro-entry-title">项目信息录入</div>
        <div class="head-box">
          <div class="identifier-box"></div>
          <div>项目基本信息</div>
        </div>
        <div class="basic-form-box">
          <div class="left-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目编号：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目编号"
                v-model="proCode"
                style="padding-left: 10px"
              />
            </div>
          </div>
          <div class="right-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目简称：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目简称"
                v-model="proShortName"
                style="padding-left: 10px"
              />
            </div>
          </div>
        </div>
        <div class="basic-form-box">
          <div class="line-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目名称：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目名称"
                v-model="proName"
                style="padding-left: 10px"
              />
            </div>
          </div>
        </div>
        <div class="basic-form-box">
          <div class="left-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>当前阶段：
            </div>
            <div class="info-box">
              <el-select v-model="stage" placeholder="请选择阶段">
                <el-option
                  v-for="item in stageOption"
                  :key="item.proStage"
                  :label="item.stageName"
                  :value="item.proStage"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="right-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>所在城市：
            </div>
            <div class="info-box">
              <el-cascader v-model="proCity" :options="cityList2"></el-cascader>
            </div>
          </div>
        </div>
        <div class="head-box">
          <div class="identifier-box"></div>
          <div>人员信息</div>
        </div>
        <div class="basic-form-box">
          <div class="left-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>销售负责人：
            </div>
            <div class="info-box">
              <el-select
                v-model="sale"
                filterable
                placeholder="请选择销售负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">电气负责人：</div>
            <div class="info-box">
              <el-select
                v-model="electrical"
                filterable
                placeholder="请选择电气负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="right-box">
            <div class="lable-box">工程负责人：</div>
            <div class="info-box">
              <el-select
                v-model="engineering"
                filterable
                placeholder="请选择工程负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">研发负责人：</div>
            <div class="info-box">
              <el-select
                v-model="research"
                filterable
                placeholder="请选择研发负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="base-box" v-if="false">
          <div class="left-box">
            <div><i class="iconfont icon-bitianxiang"></i>销售负责人：</div>
            <div class="lable-box">电气负责人：</div>
            <div class="lable-box">工程负责人：</div>
            <div class="lable-box">研发负责人：</div>
          </div>
          <div class="right-box">
            <div class="info-box">
              <el-select
                v-model="sale"
                filterable
                placeholder="请选择销售负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="info-box">
              <el-select
                v-model="electrical"
                filterable
                placeholder="请选择电气负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="info-box">
              <el-select
                v-model="engineering"
                filterable
                placeholder="请选择工程负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="info-box">
              <el-select
                v-model="research"
                filterable
                placeholder="请选择研发负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="head-box" style="height: 0; margin-top: 20px"></div>
        <div class="btn-box">
          <div class="remove-btn" @click="resetting">取消</div>
          <div class="sub-btn" @click="subPrjectData">提交</div>
        </div>
      </div>
      <div class="pro-info-list">
        <ProInfoList :openInfoDrawer="openInfoDrawer" :proList="proList" />
      </div>
      <div>
        <Drawer ref="infoDrawerRef" :drawer="drawer" />
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import PageFoot from '@/components/PageFoot.vue'
import ProInfoList from './ui/ProInfoList.vue'
import Drawer from './ui/Drawer.vue'
import cityList2 from '@/config/cityList2'

import {
  getEmpolyeeListApi,
  addProApi,
  getStageProjectListApi
} from '@/api/index'
export default {
  computed: {
    cityList2 () {
      return cityList2
    }
  },
  components: {
    PageHeader,
    PageFoot,
    ProInfoList,
    Drawer
  },
  data () {
    return {
      activeName: 'second',
      // 项目列表
      proList: [],
      proCode: '',
      proName: '',
      proShortName: '',
      // 阶段源数据
      stageOption: [
        {
          proStage: 'SalesResearch',
          stageName: '售前调研'
        },
        {
          proStage: 'Develop',
          stageName: '研发阶段'
        },
        {
          proStage: 'ElectricImplement',
          stageName: '电气实施'
        },
        {
          proStage: 'Design',
          stageName: '产品设计'
        },
        {
          proStage: 'DebugTogether',
          stageName: '联调阶段'
        },
        {
          proStage: 'Waiting4Sign',
          stageName: '等待验收'
        },
        {
          proStage: 'Finish',
          stageName: '已完成'
        }
      ],
      // 人员源数据
      stage: '',
      perOptions: [],
      value: '',
      // 销售负责人
      sale: this.$store.state.user.userCode,
      // 电气负责人
      electrical: '',
      // 工程负责人
      engineering: '',
      // 研发负责人
      research: '',
      // 合同负责人
      contract: '',
      // 城市数据源
      cityOption: [],
      // 所在城市
      proCity: [],
      // 日期
      date: '',
      // 合同金额
      amount: '',
      // 底部导航栏
      active: 2,
      // 是否弹框
      drawer: false,
      // 点击的信息
      proInfoRow: {}
    }
  },

  mounted () {
    this.getEmpolyeeList()
    this.getUserProjectList()
  },

  methods: {
    // 获取人员信息
    async getEmpolyeeList () {
      let res = await getEmpolyeeListApi()
      res.forEach((item, index) => {
        res[index].name = item.depname + '-' + item.empname
      })
      this.perOptions = [ ...res ]
    },

    // 获取当前用户录入的项目列表
    async getUserProjectList () {
      let data = {
        code: this.$store.state.user.userCode
      }
      let res = await getStageProjectListApi(data)
      this.proList = [ ...res ]
      this.proList.forEach((item, index) => {
        this.proList[index].stageName = this.stageOption.find(stageItem => {
          return stageItem.proStage === item.prostage
        }).stageName
      })
      console.log('proLsit-------->', this.proList)
    },

    // 打开日报信息查看抽屉
    openInfoDrawer (row) {
      this.proInfoRow = { ...row }
      this.$refs.infoDrawerRef.openDrawer(row)
    },

    // 提交表单
    async subPrjectData () {
      if (
        !this.proCode ||
        !this.proName ||
        !this.proShortName ||
        !this.stage ||
        !this.sale ||
        !this.proCity.length
      ) {
        this.$message.warning('请填写必填项！！')
        return
      }
      let data = {
        procode: this.proCode,
        proname: this.proName,
        proshortname: this.proShortName,
        prostage: this.stage,
        proprovince: this.proCity[0],
        procity: this.proCity[1],
        proaddress: '',
        projectmanager: this.engineering,
        electrical: this.electrical,
        salescommerce: this.sale,
        devleader: this.research
      }
      let res = await addProApi(data)
      console.log('提交表单------>', data, this.proCity)
      if (res === '添加项目成功') {
        this.$message.success('添加成功！！！')
        this.resetting()
        if (this.$store.state.user.userIsPhone) {
          this.$router.push('/MobileHomeView')
        } else {
          this.$router.push('/tablePage')
        }
      } else {
        this.$message.success(`${res}！！！`)
      }
    },

    // 重置
    resetting () {
      this.proCode = ''
      this.proName = ''
      this.proShortName = ''
      this.stage = ''
      this.electrical = ''
      this.engineering = ''
      this.research = ''
      this.proCity = []
      this.contract = ''
      this.date = ''
      this.amount = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  text-align: center;
  background: #fff;
  .form-box {
    display: flex;
    width: 1152px;
    height: 87vh;
    margin-left: 10%;

    /* border: 1px solid #dddcdc; */
    border-radius: 10px;
    .info-form-box {
      width: 864px;

      /* border: 1px solid red; */
      border-right: 1px solid #dddcdc;
      .pro-entry-title {
        height: 40px;

        /* border: 1px solid #dddcdc; */
        font-weight: bold;
        font-size: 24px;
        line-height: 40px;
      }
      .head-box {
        display: flex;
        align-items: center;
        height: 30px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
        font-size: 18px;
        line-height: 30px;
        text-align: start;
        border-bottom: 1px solid #dddcdc;
        .identifier-box {
          width: 5px;
          height: 10px;
          margin-right: 6px;
          background: #11a70c;
        }
      }
      .base-box {
        display: flex;
        margin-left: 20px;
        .left-box,
        .right-box {
          > div {
            /* border: 1px solid red; */
            height: 30px;
            margin-top: 25px;
            font-size: 14px;
            line-height: 30px;
            .el-select {
              width: 95%;
            }
          }
        }
        .left-box {
          width: 28%;
          text-align: end;
        }
        .right-box {
          width: 70%;
          text-align: start;
        }
      }
      .basic-form-box {
        /* border: 1px solid blue; */

        /* height: 30px; */
        display: flex;
        .left-box,
        .middle-box,
        .right-box {
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;

          /* height: 50px; */

          /* border: 1px solid red; */
          width: 49%;
          > div {
            /* border: 1px solid blue; */
            height: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 30px;
            .el-select,
            .el-cascader {
              width: 98%;
            }
          }
          .lable-box {
            width: 127px;
            text-align: end;
          }
          .info-box {
            width: 276px;
            line-height: 25px;
            > input {
              width: 95%;
              height: 26px;
              border: 1px solid #dcdfe6;
              border-radius: 3px;
            }
          }
        }
        .line-box {
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;

          /* height: 50px; */

          /* border: 1px solid red; */
          width: 100%;
          > div {
            /* border: 1px solid blue; */
            height: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 30px;
          }
          .lable-box {
            width: 14.5%;
            text-align: end;
          }
          .info-box {
            width: 79.5%;
            line-height: 25px;
            > input {
              width: 100%;
              height: 26px;
              border: 1px solid #dcdfe6;
              border-radius: 3px;
            }
          }
        }
        .left-box {
          /* margin: 0 6%; */
        }
      }
      .contract-form-box {
        /* border: 1px solid red; */
        display: flex;
        .left-box,
        .middle-box,
        .right-box {
          display: flex;
          flex-wrap: wrap;

          /* height: 50px; */

          /* border: 1px solid red; */
          width: 46%;
          > div {
            /* border: 1px solid blue; */
            height: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 30px;
          }
          .lable-box {
            width: 35%;
            text-align: end;
          }
          .info-box {
            width: 60%;
            line-height: 25px;
            > input {
              width: 95%;
              height: 20px;
            }
          }
        }
        .left-box {
          /* margin: 0 6%; */
        }
      }
      .btn-box {
        /* border: 1px solid red; */
        display: flex;
        width: 170px;

        /* justify-content: end; */
        padding-left: 80%;
        > div {
          /* border: 1px solid green; */
          width: 62px;
          height: 32px;
          margin: 15px;
          font-size: 12px;
          line-height: 32px;
          text-align: center;
          border-radius: 5px;
        }
        .sub-btn {
          color: #fff;
          background: #67c23a;
        }
        .sub-btn:hover {
          color: #fff;
          background: #85ce61;
          border-color: #85ce61;
          cursor: pointer;
        }
        .remove-btn {
          color: #000;
          background: rgba($color: #000, $alpha: 0%);
          border: 1px solid #dcdfe6;
        }
        .remove-btn:hover {
          color: #409eff;
          background-color: #ecf5ff;
          border-color: #c6e2ff;
          cursor: pointer;
        }
      }
      .sub-btn-box {
        width: 100px;
        height: 32px;
        margin: 8% 0 0 86%;
        font-size: 20px;
        line-height: 30px;
        border: 1px solid #c7c4c4;
      }
      .sub-btn-box:hover {
        background: rgba($color: #f5f0f0, $alpha: 50%);
        cursor: pointer;
      }
    }
    .pro-info-list {
      width: 284px;

      /* border: 1px solid red; */
      max-height: 82vh;
      overflow: auto;
    }
    .pro-info-list:hover {
      cursor: pointer;
    }
    .pro-info-list::-webkit-scrollbar {
      width: 4px;
    }
    .pro-info-list::-webkit-scrollbar-thumb {
      background: fade(rgb(78 182 214), 60%);
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
      opacity: 0.2;
    }
    .pro-info-list::-webkit-scrollbar-track {
      background: fade(rgb(78 182 214), 30%);
      border-radius: 0;
      box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
    }
  }
}
</style>